/* global chrome */

import { createApp } from "vue";
import InStock from "./InStock.vue";
// import TransactionDetails from "./transactionDetails/TransactionDetails.vue";
import Antd from "ant-design-vue";

let transactionDetailsApp = null;

export function createInStock() {
  const container = document.querySelector(".trading_dom");
  console.log(container, 'containercontainer');

  if (!container || container.querySelector(".my-trade-container-overlay"))
    return;

  const overlay = document.createElement("div");
  overlay.setAttribute("class", "my-trade-container-overlay");
  overlay.setAttribute(
    "style",
    "position: absolute;\n" +
    " left: 0;\n" +
    " top: 0;\n" +
    " width: 100%;\n" +
    " height: 100%;"
  );

  // 创建一个用于挂载 Vue 应用的子元素
  const appContainer = document.createElement("div");

  const inStock = createApp(InStock); // 创建 Vue 应用
  inStock.use(Antd);
  inStock.mount(appContainer); // 将 Vue 应用挂载到子元素上
  console.log(222221111, 'createInStock');

  container.style.position = "relative";
  overlay.appendChild(appContainer); // 将子元素添加到 overlay 中
  container.appendChild(overlay); // 将 overlay 添加到 container 中
}

// 移除组件
// function removeExistingComponent() {
//   const container = document.querySelector(".tr-trade__table");
//   if (!container) return;

//   const existingOverlay = container.querySelector(".my-transaction-details-overlay");
//   if (existingOverlay) {
//     existingOverlay.remove();
//   }
// }

import TradingTable from "@/content-scripts/components/table/TradingTable.vue";
// import { getInStockTableColumns, stockTransacRecordCol, getTransacTobotColList, stockAssetCol, currentBorrowingCol, borrowingDetailsCol } from '@/content-scripts/components/table/columns/inStockColumns.js'
import { stockTransacRecordCol } from '@/content-scripts/components/table/columns/inStockColumns.js'
import { language } from "@/content-scripts/locales";
import { getElement } from "@/content-scripts/getElement";


export function createTransactionDetails(params = {}) {
  localStorage.setItem('pagePagination', JSON.stringify({ current: params.current, size: params.pageSize, isChange: false }))
  console.log(params, '传guolai');
  const containInterval = setInterval(() => {
    const container = getElement("transaction.table.container")[0]
   
    // const secondContainer = 
    // const container = [...firstContainer, ...secondContainer]
    console.log(container, 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx');


    if (!container) {
      console.log('未找到节点为.tr-trade__table的表格');

    } else {
      clearInterval(containInterval)
      // 更新修改的值
      const existingOverlay = container.querySelector(".my-transaction-details-overlay");
      if (existingOverlay) {
        existingOverlay.remove();
      }
      let tableSource = []
      let tableColumns = []
      if (params.firstStageTabs.includes(language.tradeHistory)) {
        chrome.runtime.sendMessage({
          type: "proxy",
          method: "POST",
          // url: `/user/trade/order/page`,
          url: `/user/close/position/page`,
          body: { ...params, id: JSON.parse(localStorage.getItem('userInfo')).id }
        }, (response) => {

          tableSource = response.data
          tableColumns = stockTransacRecordCol

          const overlay = document.createElement("div");
          const existingOverlay = container.querySelector(".my-transaction-details-overlay");
          if (existingOverlay) {
            existingOverlay.remove();
          }
          overlay.setAttribute("class", "my-transaction-details-overlay");
          overlay.setAttribute(
            "style",
            "position: absolute;\n" +
            " left: 0;\n" +
            " top: 0;\n" +
            " width: 100%;\n" +
            " height: 100%;"
          );

          const tableStyle = {
            // fontSize: "12px",
            color: "#8e949e",
            // background: "#F8F9FB",
          };
          
          if (tableSource.total != 0) {
            // 挂载元素
            const appContainer = document.createElement("div");

            transactionDetailsApp = createApp(TradingTable); // 创建 Vue 应用
            console.log(tableSource, 'tasssssssssssssss');

            transactionDetailsApp.provide("tableSource", tableSource.records);
            transactionDetailsApp.provide("tablePagination", tableSource);

            transactionDetailsApp.provide("tableColumns", tableColumns);
            transactionDetailsApp.provide("tableStyle", tableStyle);
            transactionDetailsApp.use(Antd);
            transactionDetailsApp.mount(appContainer); // 将 Vue 应用挂载到子元素上
            console.log(222221111, 'createTransactionDetails');

            container.style.position = "relative";
            overlay.appendChild(appContainer); // 将子元素添加到 overlay 中
            container.appendChild(overlay); // 将 overlay 添加到 container 中
          }
         

          console.log(`[代理响应/user/trade/order/page] 状态: ${response.code}, 数据: ${JSON.stringify(response.data)}`);
        });

      }


    }

  }, 100)




}

// import { get, post } from "@/http/http";

// function getBottomTableList(params) {

//   chrome.runtime.sendMessage({
//     type: "proxy",
//     method: "POST",
//     url: `/user/trade/order/page`,
//     body: { ...params, current: 1, size: 10, gateUserId: JSON.parse(localStorage.getItem('userInfo')).id }
//   }, (response) => {
//     let tableSource = ref([])
//     let tableColumns = ref([])
//     console.log(`[代理响应/user/trade/order/page] 状态: ${response.code}, 数据: ${JSON.stringify(response.data)}`);
//     if (params.firstStageTabs.includes('当前委托') || params.firstStageTabs.includes('委托历史')) {
//       tableSource = response.data
//       tableColumns = getInStockTableColumns(params.commissionValue)
//     }
//     if (params.firstStageTabs.includes('成交记录')) {
//       tableSource = response.data
//       tableColumns = stockTransacRecordCol
//     }
//     if (params.firstStageTabs.includes('交易机器人')) {
//       tableSource = response.data
//       tableColumns = getTransacTobotColList(params.transacValue)
//     }
//     if (params.firstStageTabs.includes('借款管理')) {
//       tableSource = response.data
//       if (params.detailsSearchValue == '当前借款') {
//         tableColumns = currentBorrowingCol
//       }
//       if (params.detailsSearchValue == '借款明细') {
//         tableColumns = borrowingDetailsCol
//       }
//     }
//     if (params.firstStageTabs.includes('资产')) {
//       tableSource = response.data
//       tableColumns = stockAssetCol
//     }
//     return { tableSource, tableColumns }

//   });





// }
